<template>
  <div class="box">
    <header class="header">
      <van-nav-bar style="width: 100%;" :title="title">
        <div slot="left" @click="$router.push('/kind')"><span class="iconfont icon-zuo"></span></div>
        <div slot="right">
          <span class="iconfont icon-kefu icons"></span>
          <span class="iconfont icon-ziyuan icons"></span>
        </div>
      </van-nav-bar>
    </header>
    <div class="content">
      <!-- -->
      <TabSort :type="type" @my-event="getData" @my-event2="getData2"></TabSort>
      <!-- -->
      <div class="tablist">
        <ul>
          <li v-for="(item, index) of this.tablist" :key="index">{{item.alt.substr(0,3)}}</li>
          <li @click="show = true">筛选<span class="iconfont icon-_xia"></span></li>
        </ul>
      </div>
      <div class="productlist">
        <ul>
          <!-- -->
          <li class="product-item" v-for="item of productList" :key="item.productid" @click="toDetail(item.productid)">
            <div class="img">
              <img :src="item.imgurl[0]" alt="">
            </div>
            <div class="product-item-info">
              <p class="product-item-key"><span>畅销单品</span></p>
              <p class="product-item-tag">{{item.product_dsc}}</p>
              <p class="product-item-price">￥{{item.now_price}}</p>
            </div>
          </li>
          <!-- -->
        </ul>
      </div>
    </div>
    <van-overlay :show="show" @click="show = false">
      <div class="rightBar">
        <ul class="navBar" v-for="(kindlist,index) of this.data.kind" :key="index">
          <h3>{{kindlist.kinds}}</h3>
          <div class="kindlist">
            <template v-if="kindlist.des">
              <li v-for="(item, index) in kindlist.des " :key="index">
                <p class="text">{{ item.alt }}</p>
              </li>
            </template>
            <template v-else-if="kindlist.prices">
              <li v-for="(item, index) in kindlist.prices " :key="index">
                <p class="text">{{ item }}</p>
              </li>
            </template>
            <template v-else-if="kindlist.count">
              <li v-for="(item, index) in kindlist.count " :key="index">
                <p class="text">{{ item }}</p>
              </li>
            </template>
          </div>
        </ul>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import Vue from 'vue'
import { getProlist } from '@/api'
import { NavBar, Overlay } from 'vant'
import TabSort from '@/components/tabSort'
Vue.use(Overlay)
Vue.use(NavBar)
export default {
  props: {
    data: {
      type: Object,
      default: () => {
        return {
          _id: '5e84463064e649949018f854',
          categoryid: 'category_2',
          name: '鲜花',
          img: 'https://img02.hua.com/m/category/Classification/flower.png?v',
          kind: [
            {
              kinds: '对象',
              des: [
                {
                  img: 'https://img02.hua.com/m/category/Classification/m_category_flowers_use_All.png',
                  alt: '全部'
                },
                {
                  img: 'https://img02.hua.com/m/category/Classification/m_category_flowers_use_1-2Girlfriend.png',
                  alt: '送女友鲜花'
                },
                {
                  img: 'https://img02.hua.com/m/category/Classification/m_category_hot_Birthday.png',
                  alt: '送男性鲜花'
                },
                {
                  img: 'https://img02.hua.com/m/category/Classification/m_category_flowers_use_Elder.png',
                  alt: '送长辈鲜花'
                },
                {
                  img: 'https://img02.hua.com/m/category/Classification/m_category_flowers_use_Friend.png',
                  alt: '送朋友鲜花'
                }
              ]
            },
            {
              kinds: '场合',
              des: [
                {
                  img: 'https://img02.hua.com/m/category/Classification/m_category_flowers_occ_Love.png',
                  alt: '爱情鲜花'
                },
                {
                  img: 'https://img02.hua.com/m/category/Classification/m_category_flowers_occ_Birthday.png',
                  alt: '生日鲜花'
                },
                {
                  img: 'https://img02.hua.com/m/category/Classification/m_category_flowers_occ_Visit.png',
                  alt: '探望扶问'
                },
                {
                  img: 'https://img02.hua.com/m/category/Classification/m_category_flowers_occ_Business.png',
                  alt: '商务鲜花'
                },
                {
                  img: 'https://img02.hua.com/m/category/Classification/m_category_flowers_occ_Congratulate.png',
                  alt: '祝福庆贺'
                },
                {
                  img: 'https://img02.hua.com/m/category/Classification/m_category_flowers_occ_Wedding.png',
                  alt: '婚庆鲜花'
                },
                {
                  img: 'https://img02.hua.com/m/category/Classification/m_category_flowers_occ_Apologize.png',
                  alt: '道歉鲜花'
                },
                {
                  img: 'https://img02.hua.com/m/category/Classification/m_category_flowers_occ_Grief.png',
                  alt: '哀思鲜花'
                },
                {
                  img: 'https://img02.hua.com/m/category/Classification/m_category_flowers_occ_gat.png',
                  alt: '港澳台鲜花'
                }
              ]
            },
            {
              kinds: '花材',
              des: [
                {
                  img: 'https://img02.hua.com/m/category/Classification/m_category_flowers_mat_Rose.png',
                  alt: '玫瑰'
                },
                {
                  img: 'https://img02.hua.com/m/category/Classification/m_category_flowers_mat_Carnation.png',
                  alt: '康乃馨'
                },
                {
                  img: 'https://img02.hua.com/m/category/Classification/m_category_flowers_mat_Sunflower.png',
                  alt: '向日葵'
                },
                {
                  img: 'https://img02.hua.com/m/category/Classification/m_category_flowers_mat_Lily.png',
                  alt: '百合'
                },
                {
                  img: 'https://img02.hua.com/m/category/Classification/m_category_flowers_mat_Hydrangea.png',
                  alt: '绣球'
                },
                {
                  img: 'https://img02.hua.com/m/category/Classification/m_category_flowers_mat_Tulips.png',
                  alt: '郁金香'
                },
                {
                  img: 'https://img02.hua.com/m/category/Classification/m_category_flowers_mat_Gerbera.png',
                  alt: '扶郎/太阳花'
                },
                {
                  img: 'https://img02.hua.com/m/category/Classification/m_category_flowers_mat_Calla.png',
                  alt: '马蹄莲'
                }
              ]
            },
            {
              kinds: '玫瑰颜色',
              des: [
                {
                  img: 'https://img02.hua.com/m/category/Classification/m_category_flowers_colour_Red.png?v',
                  alt: '红玫瑰'
                },
                {
                  img: 'https://img02.hua.com/m/category/Classification/m_category_flowers_colour_Pink.png?v',
                  alt: '粉玫瑰'
                },
                {
                  img: 'https://img02.hua.com/m/category/Classification/m_category_flowers_colour_White.png?v',
                  alt: '白玫瑰'
                },
                {
                  img: 'https://img02.hua.com/m/category/Classification/m_category_flowers_colour_Purple.png?v',
                  alt: '紫玫瑰'
                },
                {
                  img: 'https://img02.hua.com/m/category/Classification/m_category_flowers_colour_Yellow.png?v',
                  alt: '黄玫瑰'
                },
                {
                  img: 'https://img02.hua.com/m/category/Classification/m_category_flowers_colour_Champagne.png?v',
                  alt: '香槟色'
                }
              ]
            },
            {
              kinds: '类别',
              des: [
                {
                  img: 'https://img02.hua.com/m/category/Classification/m_category_flowers_kind_bouquet.png',
                  alt: '花束'
                },
                {
                  img: 'https://img02.hua.com/m/category/Classification/m_category_flowers_kind_Flowerbox.png',
                  alt: '花盒'
                },
                {
                  img: 'https://img02.hua.com/m/category/Classification/m_category_flowers_kind_flowerbasket.png',
                  alt: '桌面花篮'
                },
                {
                  img: 'https://img02.hua.com/m/category/Classification/m_category_flowers_kind_flowerbasket.png',
                  alt: '瓶插花'
                },
                {
                  img: 'https://img02.hua.com/m/category/Classification/m_category_flowers_kind_flowerbasket.png',
                  alt: '果篮'
                },
                {
                  img: 'https://img02.hua.com/m/category/Classification/m_category_flowers_kind_flowerbasket.png',
                  alt: '开业花篮'
                }
              ]
            },
            {
              kinds: '价格',
              prices: ['特价鲜花', '150元以下', '150-200元', '250-350元', '350-550元', '550-800元', '800元以上']
            },
            {
              kinds: '枝数',
              count: ['9枝', '11枝', '19枝', '22枝', '29枝', '33枝', '50枝', '66枝', '99枝']
            }
          ]
        }
      }
    }
  },
  data () {
    return {
      type: 'flower',
      show: false,
      productList: [],
      title: '鲜花',
      tablist: this.data.kind[0].des,
      tablists: this.data.kind
    }
  },
  components: {
    TabSort
  },
  mounted () {
    // console.log(this.$route.params)
    const { type, sort } = this.$route.params
    console.log(type, sort)
    this.tablist = this.tablist.filter((item, index) => {
      return index > 0
    })
    getProlist({ type: this.type, limit: 20 }).then(res => {
      // console.log(res.data)
      this.list = res.data.data
      this.productList = this.list
    })
  },
  methods: {
    toDetail (productid) {
      // console.log(productid)
      this.$router.push({ path: '/detail/' + productid })
    },
    getData (val) {
      // console.log(val)
      if (val === 'all') {
        getProlist({ type: this.type, limit: 20 }).then(res => {
          // console.log(res.data)
          this.productList = res.data.data
        })
        // console.log(this.productList)
      } else if (val === 'sales') {
        this.productList = this.productList.sort((a, b) => {
          return b.sells - a.sells
        })
        // console.log(this.productList)
      } else if (val === 'new') {
        this.productList = this.productList.sort((a, b) => {
          const time = new Date(b.date).getTime() - new Date(a.date).getTime()
          // console.log(time)
          return time
        })
        // console.log(this.productList)
      }
    },
    getData2 (val) {
      // console.log(val)
      this.productList = this.productList.sort((a, b) => {
        if (val) {
          return b.now_price - a.now_price
        } else {
          return a.now_price - b.now_price
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/lib/reset.scss';
.box {
  .header {
    .icons {
      font-size: 23px;
      &:nth-child(1) {
        margin-right: 20px;
      }
    }
  }
  .content {
    background-color: #E9ECF0;
    .tablist {
      margin-top: 2px;
      background-color: #fff;
      ul {
        display: flex;
        height: 36px;
        align-items: center;
        li {
          height: 80%;
          margin-right: 10px;
          margin-left: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex: 1;
          background-color: #F7F9FA;
        }
      }
    }
    .productlist {
      ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 6px;
        li.product-item{
          width: 49%;
          margin-top: 10px;
          // box-shadow: ;
          background-color: #fff;
          .img{
            img{
              width: 100%;
            }
          }
          .product-item-info {
            p{
              margin-bottom: 5px;
              padding: {
                left: 5px;
                right: 5px;
              };
            }
            .product-item-key{
              span{
                font-size: 12px;
                border: 1px solid #FF734C;
                color: #FF734C;
                border-radius: 4px;
              }
            }
            .product-item-tag{
              @include ellipsis(100%,1);
            }
            .product-item-price{
              @include color(#FF734C)
            }
          }
        }
      }
    }
  }
  .rightBar {
    width: 80%;
    margin-left: 20%;
    background-color: #fff;
    text-align: center;
    @include overflow(auto);
    .navBar{
      h3 {
        text-align: left;
        padding: 10px;
      }
      .kindlist {
        display: flex;
        flex-wrap: wrap;
        li{
          margin: .08rem 0px;
          width: calc(100%/3);
          img{
            width: .56rem;
          }
          p {
            color: #232628;
          }
          .text {
            background-color: #F7F9FA;
            height: 40px;
            width: 80%;
            margin: auto;
            line-height: 40px;
          }
        }
      }
    }
  }
}
</style>
